<template>
  <div v-if="Object.keys(param_data).length === 0" style="text-align: center">
    No Shared MOFs
  </div>
  <div v-else class="params-metrics">
    <OneParamMetrics
      v-for="(data, param_name) in param_data"
      :key="param_name"
      :param_name="param_name as string"
      :metrics="data.metrics"
      :pdf_result="data.pdf"
    />
  </div>
</template>

<script setup lang="ts">
import { PropType, watch } from 'vue'
import { MetricsData } from '@/types/visualization/graph'

import OneParamMetrics from '@/components/vis-graph/figure/metric/params-metrics/OneParamMetrics.vue'

const props = defineProps({
  param_data: {
    type: Object as PropType<MetricsData['params']>,
    required: true,
  },
})

watch(props, () => {
  console.log(props.param_data)
})
</script>

<style scoped>
.params-metrics {
  height: 100%;
  overflow: auto;
}

.one-param-metrics {
  margin-bottom: 1rem;
}

.one-param-metrics:last-child {
  margin-bottom: 0;
}
</style>
